<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>堆叠顺序</title>

        <style type="text/css">
            body{ margin: 0; padding: 0; }

            .outer {
                width: 400px ; 
                height: 400px ;
                border: 1px solid blue ; 
                margin: auto ;
                position: relative ;
            }

            .middle {
                width: 300px ; 
                height: 300px ;
                border: 1px solid green ; 
                margin: 49px auto ;
            }

            .first {
                position: absolute ;
                left: 0 ;
                top: 0 ;
                z-index: 500 ;
                width: 200px ;
                height: 200px ;
                background:  rgba(250, 250, 250, 0.5) ;
            }

            .second {
                position: absolute ;
                left: 0 ;
                top: 0 ;
                z-index: -250 ;
                width: 200px ;
                height: 200px ;
                line-height: 100px ;
                background:  rgba(109, 107, 255, 0.5) ;
            }

            .third {
                position: absolute ;
                left: 0 ;
                top: 0 ;
                z-index: 250 ;
                width: 200px ;
                height: 200px ;
                line-height: 200px ;
                background: rgba(250, 250, 250, 0.5) ;
            }

            .another {
                position: absolute ;
                left: 0 ;
                top: 0 ;
                width: 300px ;
                height: 300px ;
                background:  rgba(160, 217, 255, 0.5) ;
            }

        </style>

    </head>
    <body>

        <div class="outer">

            <div class="middle">
                <div class="inner first">FIRST</div>
                <div class="inner second">SECOND</div>
                <div class="inner third">THIRD</div>
            </div>

            <div class="another"></div>
        </div>
        
    </body>
</html>